import React, { Component } from 'react';
import { Button, Input } from 'antd-mobile';
import styles from './TeamDetail.module.less';
import { getTeamById, saveTeam } from '../../store/teamStore';
import { withRouterParams } from '../../utils/routerHocs';

class TeamDetail extends Component {
  constructor(props) {
    super(props);
    const { id } = props.params || {};
    const team = id ? getTeamById(id) : null;

    this.state = {
      id: team ? team.id : '',
      name: team ? team.name : '',
      isEdit: !!id,
    };
  }

  handleChange = (key, value) => {
    this.setState({ [key]: value });
  };

  handleSave = () => {
    const { id, name, isEdit } = this.state;
    if (!name || name.trim() === '') {
      alert('队名不能为空');
      return;
    }

    const payload = {
      id: isEdit && id ? id : String(Date.now()),
      name: name.trim(),
    };

    saveTeam(payload);
    this.props.navigate('/teamList');
  };

  handleCancel = () => {
    this.props.navigate('/teamList');
  };

  render() {
    const { id, name } = this.state;

    return (
      <div className={styles.container}>
        <div className={styles.card}>
          <div className={styles.formItem}>
            <div className={styles.label}>ID（只读）</div>
            <Input value={id} readOnly className={styles.input} placeholder="保存后自动生成" />
          </div>
          <div className={styles.formItem}>
            <div className={styles.label}>队名</div>
            <Input value={name} onChange={val => this.handleChange('name', val)} className={styles.input} placeholder="请输入队名" />
          </div>
          <div className={styles.btnRow}>
            <Button color="primary" onClick={this.handleSave}>保存</Button>
            <Button onClick={this.handleCancel}>取消</Button>
          </div>
        </div>
      </div>
    );
  }
}

export default withRouterParams(TeamDetail);


